<template>
  <ex-dialog width="70%" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose" append-to-body>
    <div class="main" v-loading="loading">
      <p class="title_date" v-if="queryParams.beginTime != ''">统计日期：{{ queryParams.beginTime }} 至 {{ queryParams.endTime }}
      </p>
      <div>
        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border show-summary
          :summary-method="getSummaries" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="直播ID" align="center" prop="liveId"></el-table-column>
          <el-table-column label="直播名称" align="center" prop="liveName"></el-table-column>
          <el-table-column label="开始直播时间" align="center" prop="beginTime" width="100"></el-table-column>
          <el-table-column label="直播结束时间" align="center" prop="endTime" width="100"></el-table-column>
          <el-table-column label="直播时长" align="center" prop="liveDuration" width="100"></el-table-column>
          <el-table-column label="支付GMV" align="center" prop="payGmv"></el-table-column>
          <el-table-column label="支付券数" align="center" prop="payOfCoupons"></el-table-column>
          <el-table-column label="核销GMV" align="center" prop="writeOffGmv"></el-table-column>
          <el-table-column label="退款GMV" align="center" prop="refundGmv"></el-table-column>
          <el-table-column label="核销券数" align="center" prop="writeOffOfCoupons"></el-table-column>
          <el-table-column label="退款券数" align="center" prop="refundOfCoupons"></el-table-column>
          <el-table-column label="服务商佣金" align="center" prop="serviceCommission" width="100"></el-table-column>
          <el-table-column label="提成比例" align="center" prop="ratio">
            <template slot-scope="scope">
              <span>{{ scope.row.ratio }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="提成" align="center" prop="commission"></el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import Loading from "@/components/Loading/index";
// api
import {
  commissionDetailLs
} from "@/api/customer/serviceData";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
    date: Array,
  },
  data() {
    return {
      labelWidth: "140px",
      inputWidth: "430px",
      title: "直播明细",
      loading: false,
      total: 0,// 总条数
      tabList: [],//表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: '',//创建开始时间
        endTime: '',//创建结束时间
        userId: '',//角色id
      },
    };
  },
  computed: {},
  mounted() {
    if (this.date.length > 0) {
      this.queryParams.beginTime = this.date[0];
      this.queryParams.endTime = this.date[1];
    } else {
      this.queryParams.beginTime = ''
      this.queryParams.endTime = ''
    }
    console.log(this.date)
    console.log(this.queryParams)
    this.queryParams.userId = this.id
    this.getList()
    // let currentDate = new Date();
    // let year = currentDate.getFullYear();
    // let month = currentDate.getMonth() + 1
    // this.ruleForm.monthTime = year + '-' + month
  },
  computed: {},
  methods: {
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
    /** 查询列表 */
    getList() {
      var data = this.queryParams
      this.loading = true;
      commissionDetailLs(data).then(response => {
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '小计';
          return;
        }
        else if (index === 1 || index === 2 || index === 3 || index === 4 | index === 13) {
          sums[index] = '-';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Math.round((Number(prev) + Number(curr)) * 100) / 100;
            } else {
              return prev;
            }
          }, 0);
        } else if (column.property == 'liveDuration') { //计算直播时长
          const values = data.map((item) => String(item[column.property]));
          if (values.length > 0) {
            const total = values.reduce((prev, curr) => {
              const value = curr;
              if (value != '') {
                const currs = curr.split(':');
                const currsH = currs[0] * 3600;
                const currsM = currs[1] * 60;
                const currsS = currs[2] * 1;
                return this.$cal.accAdd(parseFloat(prev), parseFloat(currsH + currsM + currsS));
              } else {
                return prev;
              }
            }, 0);
            var S = total % 60
            var M = parseInt(total % 3600 / 60);
            const H = parseInt(total / 3600)
            if (M < 10) {
              M = "0" + M
            }
            if (S < 10) {
              S = "0" + S
            }
            sums[index] = H + ' : ' + M + " : " + S
          }
        }
        else {
          sums[index] = '-';
        }
      });
      return sums;
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

.title_date {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>